.ztBox {
    width: 34.4vw;
    height: 68.5vh;
    background: url("../../../assets/img/login/zt1.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 21.9vh;
    left: 24.5vw;
}

.numberS {
    width: 5.9vw;
    height: 16.9vh;
    background: url("../../../assets/img/login/szhgl.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 2.1vh;
    z-index: 10;
    animation: dh 5s linear infinite;
}

.cloud {
    width: 3.1vw;
    height: 4.8vh;
    background: url("../../../assets/img/login/cloud.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 0.3vh;
    left: 7.5vw;
}

.cloud1 {
    width: 2.1vw;
    height: 3.1vh;
    background: url("../../../assets/img/login/cloud1.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 0.8vh;
    left: 14.9vw;
}

.cloud2 {
    width: 1.7vw;
    height: 2.6vh;
    background: url("../../../assets/img/login/cloud2.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 18.1vw;
}

.zsmb {
    width: 10.6vw;
    height: 19.7vh;
    background: url("../../../assets/img/login/zsmb.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: -4.9vw;
    top: 13.8vh;
}

.mb1 {
    width: 2.3vw;
    height: 6.4vh;
    background: url("../../../assets/img/login/mb1.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 18.3vw;
    top: 14.2vh;
    animation: mb1 2s linear infinite;
}

.centerWhiteBox {
    width: 2.9vw;
    height: 5.8vh;
    background: url("../../../assets/img/login/centerWhiteBox.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 8.8vw;
    top: 16.4vh;
    animation: bt 3s linear infinite;
}

.cloud3 {
    width: 2.7vw;
    height: 4.3vh;
    background: url("../../../assets/img/login/cloud2.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 30.2vw;
    top: 2.4vh;
}

.cloud4 {
    width: 1.7vw;
    height: 2.6vh;
    background: url("../../../assets/img/login/cloud2.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 35.8vw;
    top: 5.7vh;
}

.mb2 {
    width: 2.6vw;
    height: 7.2vh;
    background: url("../../../assets/img/login/mb2.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 32.8vw;
    top: 15.3vh;
    animation: mb2 4s linear infinite;
}

.lbx {
    width: 3.6vw;
    height: 7.8vh;
    background: url("../../../assets/img/login/lbx.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 33.6vw;
    top: 23.6vh;
    animation: heartBeats 5s linear infinite;
}

#particles-js.animate__fadeInUp,
#particles-js.animate__fadeOutUp {
    display: block;
}

@keyframes heartBeats {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    14% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    42% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.szzl {
    width: 5.5vw;
    height: 18.7vh;
    background: url("../../../assets/img/login/szzl.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 27.8vw;
    top: 15.8vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.szzl img {
    width: 1.1vw;
    height: 9.2vh;
    margin-left: -1.5vw;
    animation: flashs 3s linear infinite;
}

.lb {
    width: 2.6vw;
    height: 5.5vh;
    background: url("../../../assets/img/login/lb.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 31.9vw;
    top: 37vh;
    animation: flashs1 5s linear infinite;
}

.dw {
    width: 1.6vw;
    height: 4.7vh;
    background: url("../../../assets/img/login/dw.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 8.1vw;
    top: 50.2vh;
    animation: bounces 5s linear infinite;
}

.hsfk {
    width: 1.8vw;
    height: 3vh;
    background: url("../../../assets/img/login/hsfk.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 17.9vw;
    top: 39.4vh;
    transform: translateY(20px);
    animation: bt 2s linear infinite;
}

.hsfk1 {
    width: 1.8vw;
    height: 3vh;
    background: url("../../../assets/img/login/hsfk.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 10.9vw;
    top: 32.4vh;
    transform: translateY(20px);
    animation: bt 1.5s linear infinite;
}

.wmy {
    width: 8.8vw;
    height: 8.2vh;
    position: absolute;
    left: 21.8vw;
    top: 27.8vh;
}

.wmy img {
    width: 8.8vw;
    height: 15.2vh;
}

.xny {
    width: 14.7vw;
    height: 22.8vh;
    position: absolute;
    left: -12vw;
    top: 31.8vh;
}

.xny img {
    width: 14.7vw;
    height: 22.8vh;
}

@keyframes bt {
    0% {
        transform: translateY(20px) scale(1.2);
    }

    50% {
        transform: translateY(0) scale(1.2);
    }

    100% {
        transform: translateY(20px) scale(1.2);
    }
}

@keyframes dh {
    0% {
        left: -1vw;
        top: 2.1vh;
    }

    50% {
        top: -1.9vh;
        left: 0vw;
    }

    100% {
        left: -1vw;
        top: 2.1vh;
    }
}

@keyframes flashs {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes flashs1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.5;
    }
}

@keyframes heartBeats {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    14% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    42% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounces {

    0%,
    20%,
    53%,
    100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.1);
        transform: translate3d(0, -15px, 0) scaleY(1.1);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
        transform: translate3d(0, 0, 0) scaleY(0.95);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

@keyframes mb1 {
    0% {
        left: 18.3vw;
        top: 14.2vh;
    }

    50% {
        left: 16.7vw;
        top: 15.7vh;
    }

    100% {
        left: 18.3vw;
        top: 14.2vh;
    }
}

@keyframes mb2 {
    0% {
        left: 32.8vw;
        top: 15.3vh;
    }

    50% {
        left: 29.7vw;
        top: 11.9vh;
    }

    100% {
        left: 32.8vw;
        top: 15.3vh;
    }
}